<template>
    <div>
        <Modal width="800"
               v-model="modal.directory"
               @on-ok="ok"
               @on-cancel="cancel"
               draggable
               scrollable
               :loading="loading"
               title="目录">
            <div style="max-height:600px;overflow-y:auto;overflow-x:hidden;">
                <Tree :data="treeNodes" :render="treeNodeRender"></Tree>
            </div>
        </Modal>
    </div>
</template>

<script>
    import {classTreedata} from '@/libs/util'
    export default {
        data() {
            return {
                loading: true,
                mflag:false,
                treeNodes: [
                    {
                        title: '',
                        expand: true,
                        type: "class",
                        classId: null,
                        children: []
                    }
                ]
            }
        },
        props: {
            modal: {
                directory: false,
                class: {}
            }
        },
        methods: {
            ok() {
                this.http.post("/class/saveDirectory", this.qs.parse(this.treeNodes[0])).then(res => {
                    if (res.data) {
                        this.$Message.success("添加成功！！！")
                        this.$parent.modal.directory = false
                      //  this.$emit("directoryStatus", false)
                    } else {
                        this.loading = false
                        this.$Message.error("添加失败")
                    }
                }).catch(res => {
                    this.$Message.error("出错拉！！")
                })

            },
            cancel() {
                this.$parent.modal.directory = false
              //  this.$emit("directoryStatus", false)
            },
            /**
             * 添加子节点
             */
            appendNode(data) {
                let that = this
                this.modal.directory = false
                this.mflag = true
                let titles = null;
                this.$Modal.confirm({
                    title: "编辑",
                    render: (h) => {
                        return <Input oninput={(e) => {
                            titles = e
                        }}/>
                    },
                    onOk() {
                        this.mflag = false
                        that.modal.directory = true
                        const children = data.children || [];
                        children.push({title: titles, expand: true,chapterId:null,type: data.type == "class" ? "fu" : "zi"});
                        this.$set(data, 'expand', true); // 从数据库获取的数据，有可能还不存在 expand 属性
                        this.$set(data, 'children', children);
                    },
                    onCancel() {
                        this.mflag = false
                        that.modal.directory = true
                    }
                })
            },
            /**
             *  删除节点
             */
            removeNode(root, node, data) {
                const parentKey = root.find(el => el === node).parent;
                const parent = root.find(el => el.nodeKey === parentKey).node;
                const index = parent.children.indexOf(data);
                parent.children.splice(index, 1);
            },
            /**
             * 编辑子节点
             */
            editNode(root, node, data) {
                let that = this
                this.modal.directory = false
                this.mflag = true
                const parentKey = root.find(el => el === node).parent;
                const parent = root.find(el => el.nodeKey === parentKey).node;
                const index = parent.children.indexOf(data);
                let afterval = null;
                this.$Modal.confirm({
                    title: "编辑",
                    render: (h) => {
                        return <Input value={parent.children[index].title} oninput={(e) => {
                            afterval = e
                        }}/>
                    },
                    onOk() {
                        this.mflag = false
                        that.modal.directory = true
                        parent.children[index].title = afterval
                    },
                    onCancel() {
                        this.mflag = false
                        that.modal.directory = true
                    }
                })
            },
            /**
             * 使用 JSX 渲染节点
             */
            treeNodeRender(h, {root, node, data}) {
                return (
                    <div style="width:700px">
                    <div class="title" style="float:left">
                        <Icon style=""
                              type={data.type == "class" ? 'ios-book' : 'md-pricetag'}/>
                        <Tag
                            color={data.type == "class" ? 'primary'  : 'magenta'}>{data.title}</Tag>
                    </div >
                     <div style="float:right">
                     <Button size="small" type="error" v-show={data.type != "class"} style="margin-left:10px"
                             icon="md-remove" onClick={() => {
                         this.removeNode(root, node, data);
                     }}></Button>
                     <Button size="small" type="success" v-show={data.type == "class"} style="margin-left:10px"
                             icon="md-add" onClick={() => {
                         this.appendNode(data);
                     }}></Button>
                     <Button size="small" type="info" v-show={data.type != "class"} style="margin-left:10px"
                             icon="ios-brush" onClick={() => {
                         this.editNode(root, node, data);
                     }}></Button>
                     </div>
                </div>
                );
            },
            getdirectoryById(val) {
                this.http.post("/class/getdirectoryById", this.qs.stringify({'classId': val})).then(res => {
                    if (res.data) {
                        this.treeNodes[0].children =this.treeNodes[0].children = classTreedata(res.data)
                    }
                })
            }
        },
        created() {

        }
        ,
        watch: {
            /**
             * 初始化
             * @param val
             */
            'modal.directory'(val) {
                if (val&&!this.mflag) {
                    this.getdirectoryById(this.modal.class.classId);
                    this.treeNodes[0].classId = this.modal.class.classId
                    this.treeNodes[0].title = this.modal.class.className
                }
            }
        }
    }
</script>
